<template>
  <el-breadcrumb separator="/" class="breadcrumb-nav">
    <el-breadcrumb-item
      v-for="(item, index) in breadcrumbItems"
      :key="index"
      :to="item.to"
    >
      <el-icon v-if="item.icon" class="breadcrumb-icon">
        <component :is="item.icon" />
      </el-icon>
      {{ item.label }}
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script setup lang="ts">
import { computed } from 'vue'
// @ts-ignore
import { useRoute } from 'vue-router'
import { 
  House, 
  Clock, 
  Search, 
  Document, 
  FolderOpened 
} from '@element-plus/icons-vue'

interface BreadcrumbItem {
  label: string
  to?: string
  icon?: any
}

const route = useRoute()

const breadcrumbItems = computed<BreadcrumbItem[]>(() => {
  const items: BreadcrumbItem[] = [
    {
      label: '首页',
      to: '/',
      icon: House
    }
  ]

  switch (route.name) {
    case 'History':
    case 'HistoryVersion':
      items.push({
        label: '历史浏览器',
        to: '/history',
        icon: Clock
      })
      if (route.params.versionId) {
        items.push({
          label: `版本 ${route.params.versionId}`,
          icon: FolderOpened
        })
      }
      break

    case 'Search':
    case 'SearchResults':
      items.push({
        label: '搜索文件',
        to: '/search',
        icon: Search
      })
      if (route.params.query) {
        items.push({
          label: `搜索: ${route.params.query}`
        })
      }
      break

    case 'Diff':
    case 'DiffCompare':
      items.push({
        label: '文件对比',
        to: '/diff',
        icon: Document
      })
      if (route.params.versionA && route.params.versionB) {
        items.push({
          label: `对比 ${route.params.versionA} vs ${route.params.versionB}`
        })
      }
      break

    case 'Recovery':
    case 'RecoveryFile':
      items.push({
        label: '文件恢复',
        to: '/recovery',
        icon: FolderOpened
      })
      if (route.params.fileId) {
        items.push({
          label: `恢复文件: ${route.params.fileId}`
        })
      }
      break
  }

  return items
})
</script>

<style scoped>
.breadcrumb-nav {
  margin-bottom: 16px;
  padding: 12px 0;
}

.breadcrumb-icon {
  margin-right: 4px;
  vertical-align: middle;
}

:deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: var(--el-text-color-primary);
  font-weight: 500;
}
</style>